<template>
  <custom-container class="domain">
    <custom-container-header class="domain__header">
      <el-button
        type="primary"
        size="medium"
        class="domain__header-button"
        @click="add">添加</el-button>
      <el-tip
        size="medium"
        inline
        class="domain__header-tip"
      >
        最大支持添加{{maxLength}}条推广链接地址
      </el-tip>
      <el-popover
        placement="bottom"
        width="470"
        :offset="100"
        trigger="click">
        <div class="domain__tip">
          <div class="domain__tip-title">允许输入的类型：</div>
          <div class="domain__tip-content">
            1.代理专属的标示，例如某代理的普通域名为：“http://abc.ballbet.com”，<br>允许直接输入“abc”绑定成功。<br>
            2.代理的普通域名。例如某代理的普通域名为：“http://abc.ballbet.com”，<br>允许直接输入“http://abc.ballbet.com”这样的域名，<br>也允许输入“abc.ballbet.com”这样不带“http”前缀。<br>
            3.代理的专属域名。例如某代理的专属域名为：“http://www.ballbet2018.com”，<br>允许直接输入“http://www.ballbet2018.com”这样的域名，<br>也允许输入“www.ballbet2018.com”这样不带“http”前缀，<br>也允许输入“ballbet2018.com”这样的短域名。
          </div>
        </div>
        <div class="domain__tip-icon" slot="reference">?</div>
      </el-popover>
    </custom-container-header>
    <custom-container-body>
      <el-table
        :data="cTableData"
        :loading="loading"
        element-loading-text="加载中..."
        border
        border-radius
      >
        <el-table-column label="编号" align="center" type="index" :index="indexMethod" width="80"></el-table-column>

        <el-table-column prop="name" label="自定义编号" align="center"></el-table-column>
        <el-table-column label="域名类别" align="center">
          <template slot-scope="{row}"
                    v-if="row.domain"
          >
            {{Number(row.type) | toLinkType}}
          </template>
        </el-table-column>
        <el-table-column label="链接地址" align="center" width="220">
          <template slot-scope="{row}"
                    v-if="row.domain"
          >
            <template v-if="Number(row.type) === consts.NORMAL_DOMAIN">
              <el-popover
                placement="bottom"
                width="300"
                trigger="click">
                <el-button slot="reference" type="link" size="small">{{row.cDomain}}</el-button>
                <el-table
                  border
                  border-radius
                  :data="row.domainList"
                >
                  <el-table-column align="center" prop="cDomain" label="域名"></el-table-column>
                  <el-table-column align="center" label="二维码">
                    <template slot-scope="{row}">
                      <el-button type="link" size="small" @click.native="openDialog({dialogName: 'qr-code', props: {domain: row.cDomain}})">生成二维码</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </template>
            <template v-else>
              {{row.cDomain}}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="二维码" align="center">
          <template slot-scope="{row}"
                    v-if="row.domain"
          >
            <el-button type="link" size="small" @click.native="openDialog({dialogName: 'qr-code', props: {domain: row.cDomain}})">生成二维码</el-button>
          </template>
        </el-table-column>
        <el-table-column label="注册总人数" align="center" prop="registerNum"></el-table-column>
        <el-table-column label="存款总人数" align="center" prop="rechargeNum"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}"
                    v-if="row.domain"
          >
            <el-button type="link" size="small" @click="openDialog({dialogName: 'edit-domain', props: row})">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible" :before-close="() => {dialogVisible = false}" :title="dialogTitle"
                 :width="consts.DIALOG_SIZE_NORMAL">
        <component :is="dialogName"
                   @on-success="refresh"
                   @on-close="closeDialog"
                   v-if="dialogName"
                   :edit-data="dialogProps"
        ></component>
      </el-dialog>
    </custom-container-body>
  </custom-container>
</template>

<script>
  import {
    proxyInfoApi as getApi
  } from "@/services/api/promotion";
  import {
    systemDomainList as domainListApi,
  } from '@/services/api/user';

  import {dialog, getCommand} from "@/build";

  import QrCode from "./qr-code";
  import EditDomain from './edit-domain';

  export default {
    name: "domain",

    mixins: [dialog, getCommand],

    components: {
      QrCode,
      EditDomain,
    },

    data() {
      return {
        maxLength: 20,
        tableData: [],
        domainList: [],
        loading: false,
      };
    },

    filters: {
      toLinkType(value) {
        return value === consts.NORMAL_DOMAIN ? '普通域名' : '专属域名';
      }
    },

    computed: {
      cTableData() {
        return _.map(this.tableData, info => {
          return {
            ...info,
            cDomain: Number(info.type) === consts.NORMAL_DOMAIN ? _.toDomain(info.domain, this.domainList ? this.domainList[0].domain : undefined) : info.domain,
            domainList: Number(info.type) === consts.NORMAL_DOMAIN ? this.getDomainList(info.domain) : []
          }
        });
      },
      currentLength() {
        return _.filter(this.tableData, _.negate(_.isEmpty)).length;
      }
    },

    methods: {
      add() {
        if (this.currentLength < this.maxLength) {
          this.openDialog({dialogName: 'edit-domain'});
        } else {
          this.$notify({
            title: `您最多只能创建${this.maxLength}个推广链接`,
            type: 'error',
            duration: 2000
          });
        }
      },
      getDomainList(domainPre) {
        return _.map(this.domainList, info => {
          return {
            cDomain: _.toDomain(domainPre, info.domain)
          };
        });
      },
      refresh() {
        this.closeDialog();
        this.getAll();
      },
      indexMethod(index) {
        return index + 1;
      }
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        format: (data) => {
          return [...data.list, ..._.times(this.maxLength - data.total, _.constant({}))];
        }
      });

      this.bindGet(domainListApi, 'domainList');

      this.getAll();
    }
  };
</script>
<style lang="scss" scoped>
  @include b(domain) {
    @include e(header) {
      display: flex;
      align-items: center;
    }
    @include e(header-button) {
      width:141px;
      margin-right: 30px;
    }
    @include e(header-tip) {
      width: 389px;
    }
    @include e(tip-icon) {
      width: 24px;
      height: 24px;
      background: rgba(243, 243, 243, 1);
      color: $--color-black-4;
      font-size: $--font-size-x-large;
      border-radius: $--border-radius-circle;
      text-align: center;
      line-height: 24px;
      display: inline-block;
      cursor: pointer;
      vertical-align: top;
      margin-top: 4px;
      margin-left: 10px;
    }
    @include e(tip) {
      padding: 10px 8px;
      box-sizing: border-box;
    }
    @include e(tip-title) {
      font-size: $--font-size-small;
      font-weight: bold;
      margin-bottom: 4px;
    }
    @include e(tip-content) {
      font-size: $--font-size-small;
      line-height: 22px;
      margin-bottom: 12px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
</style>
